var tips = document.getElementsByClassName("tips")[0];
var search_bar = document.querySelector(".search_bar");
var orderColBox = document.querySelector(".orderColBox");
var select = document.querySelector(".select");
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var pageTips = document.querySelector(".pageTips");

var key = "";   // 默认查询所有
var orderCol = "id";  // 默认按id排序
var pageNum = 20;
var pageIndex = 1;
$(function () {
    if (getCookie("lgc")) {
        tips.innerHTML = "欢迎您," + getCookie("lgc") + "<button onclick='exit()'>退出</button>";
    }

    $(document).on("click",".Collection",function(){
        alert("加入收藏失败，请使用Ctrl+D进行添加");
    })

    var clientWidth = $(".wrapAll").width();
    var index = 0;
    var timer = null;

    autoPlay();

    function autoPlay() {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            $(".dotList li").eq(index).addClass("active").siblings().removeClass("active");
            $(".swiper").animate({ left: -clientWidth * index }, function () {
                if (index >= $(".swiper li").length - 1) {
                    $(".swiper").css({ left: 0 });
                    index = 0;
                    $(".dotList li").eq(index).addClass("active").siblings().removeClass("active");
                }
            })
        }, 3000)
    }

    $(".dotList li").click(function () {
        index = $(this).index();
        // $(this).addClass("active").siblings().removeClass("active");
        $(".swiper").animate({ left: -clientWidth * index });
        $(".dotList li").eq(index).addClass("active").siblings().removeClass("active");
        // autoPlay();
    })

    $(".wrapAll").hover(function () {
        clearInterval(timer);
    }, function () {
        autoPlay();
    })


    // 页面加载时请求所有数据
    loadGoods();

    orderColBox.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        // if (target.className == "searchBtn") {
        //     var searchCon = this.querySelector(".searchCon");
        //     key = searchCon.value;
        //     // console.log(key);
        //     loadGoods();
        // } else if (target.className == "orderCol") {
        //     orderCol = target.value;
        //     // console.log(target, orderCol);
        //     loadGoods();
        // }
        if (target.className == "orderCol") {
            orderCol = target.value;
            // console.log(target, orderCol);
            loadGoods();
        }
    }

    search_bar.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "searchBtn") {
            var searchCon = this.querySelector(".searchCon");
            key = searchCon.value;
            // console.log(key);
            loadGoods();
        } 
    }

    select.onclick = function () {
        pageNum = this.value;
        console.log(pageNum);
        loadGoods();
    }

    async function loadGoods() {
        // let result = await searchAllGoods();
        // console.log(result);
        // let { status, list } = result;
        // if (status) {
        //     var html = "";
        //     list.forEach(({ id, goodsId, goodsName, goodsImg, goodsPrice }) => {
        //         html += ` <li>
        //             <a href="./goodsDetail.html?gid=${goodsId}">
        //                 <img src="${goodsImg}"
        //                     alt="">
        //                 <p class="price">￥${goodsPrice}</p>
        //                 <p class="title">${goodsName}</p>
        //             </a>
        //         </li>`
        //     });
        //     $(".goodsList ul").html(html);
        // } else {  //暂无数据
        //     $(".goodsList ul").html("暂无数据");
        // }

        ajaxLoad({ key, orderCol, pageIndex, pageNum }).then(function (result) {
            var { status, detail, list, maxPage } = result;
            // console.log(result);
            var html = "";
            list.forEach(({ id, goodsId, goodsName, goodsImg, goodsPrice }) => {
                html += ` <li>
                    <a href="./details.html?gid=${goodsId}">
                        <img src="${goodsImg}"
                            alt="">
                        <p class="price">￥${goodsPrice}</p>
                        <p class="title">${goodsName}</p>
                    </a>
                </li>`
            })
            $(".goodsList ul").html(html);

            pageIndex = pageIndex > maxPage ? maxPage : pageIndex;

            pageTips.innerHTML = `${pageIndex}/${maxPage}`;

            prev.onclick = function () {
                if (pageIndex <= 1) return false;
                pageIndex--;
                loadGoods();
            }

            next.onclick = function () {
                if (pageIndex >= maxPage) return false;
                pageIndex++;
                loadGoods();
            }
        }).catch(err => {
            // tbody.innerHTML = `<tr><td colspan="9">暂无数据</td></tr>`;
            throw err;
        });


    }

})



function exit() {
    delCookie("lgc");
    location.reload();
}